"""
@author: gaoyx
@date: 2021-12-24 16:19:53
"""
<!-- 列表字段说明 -->
<template>
  <div :class="['info', itemLayout]">
    <div :class="{ 'colon-box': isColon }">
      <label>
        <p>{{ label }}<span></span></p>
      </label>
    </div>
    <span class="value">
      <slot />
      <slot name='html'/>
    </span>
  </div>
</template>

<script>
export default {
  name: 'field',
  props: {
    // width: {
    //   type: String,
    //   default: '70px'
    // },
    label: {
      type: String,
      default: ''
    },
    layout: {
      type: String,
      default: 'inline'
    },
    colon: {
      type: Boolean,
      default: undefined
    }
  },
  inject: {
    context: { default: () => ({}) }
  },
  data () {
    return {
      isColon: true
    }
  },
  computed: {
    itemLayout () {
      //布局
      return this.context.layout || this.layout
    }
  },
  created () {
    this.isColon =
      this.colon === true ||
      (this.context.colon !== false && this.colon !== false)
  }
}
</script>

<style lang='scss' scoped>
::v-deep .van-row {
  display: flex;
  align-items: center;
}
.info {
  align-items: flex-start;
  label {
    color: #919191;
    line-height: 22px;
    // white-space: nowrap;
    // text-align-last: justify;
    padding-right: 2px;
    width: 100%;
    display: block;
    width: 70px;
    p {
      text-align: justify;
      width: 100%;
      margin: 0;
      height: 22px;
      span {
        display: inline-block;
        width: 100%;
      }
    }
    // span {
    //   display: block;
    //   text-align: justify;
    //   display: block;
    //   &::after {
    //     content: '';
    //     width: 100%;
    //     display: inline-block;
    //     overflow: hidden;
    //     height: 0;
    //   }
    // }
  }
  .value {
    line-height: 22px;
    display: block;
    word-break: break-all;
    font-weight: 400;
    color: #333;
  }
}

.colon-box {
  padding-right: 10px;
  margin-right: 6px;
  position: relative;
  &::before {
    content: '：';
    position: absolute;
    right: -5px;
    height: 22px;
    display: flex;
    align-items: center;
    top: 0px;
  }
}
.vertical {
  display: flex;
  flex-direction: column;
}
.inline {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
</style>